window.onload = function () {

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    var data = [];
    // var now = +new Date(1997, 9, 3);
    var now = new Date();
    //var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    // for (var i = 0; i < 10; i++) {
    //     data.push(randomData());
    // }

    function randomData(createTime,value) {
        //now = new Date(+now + oneDay);
        now = createTime;
        //value = value + Math.random() * 21 - 10;
        var h = now.getHours();
        var m = now.getMinutes();
        if (m < 10) {
            m = "0" + m;
        }
        var s = now.getSeconds();
        // console.info(typeof s);
        if (s < 10) {
            s = "0" + s;
        }
        var newData = {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + " " + [h, m, s].join(":"),
                Math.round(value)
            ]
        }
        console.info(newData.value[0]);
        //console.info(newData);

        return newData;
    }

    var option = {
        title: {
            text: 'Response Time'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                //console.info("params.name=" + params.name)
                //var date = new Date(params.name);
                //console.info("date = " + date);
                //console.info("params.value[1] = " + params.value[1]);
                //return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                return params.value[1];
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '响应时间',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data
        }]
    };

    //loadXMLDoc();
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.info("==>" + xmlhttp.responseText);
                var jsonData = eval("(" + xmlhttp.responseText + ")");
                data = [];
                for (var i=0;i<jsonData.content.length;i++){
                    var content = jsonData.content[i];
                    console.info("createTime="+new Date(content.createTime));
                    console.info("responseTime="+content.responseTime);
                    data.push(randomData(new Date(content.createTime),content.responseTime))
                }

                myChart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }
        }
        xmlhttp.open("GET", "/dianjian/infoPage/1/600", true);
        xmlhttp.send();
    }

    loadXMLDoc();
    setInterval(function () {

        //for (var i = 0; i < 5; i++) {
        // if (data.length > 100) {
        //     data.shift();
        // }
        //data.push(randomData());
        //}

        loadXMLDoc();
        //console.info("loadXMLDoc()=" + loadXMLDoc());


        // var newData = {
        //     name: now.toString(),
        //     value: [
        //         [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + " " + [h, m, s].join(":"),
        //         Math.round(value)
        //     ]
        // }

        //console.info(data);


    }, 3000);


    // var option = {
    //     title : {
    //         text: '未来一周气温变化',
    //         subtext: '纯属虚构'
    //     },
    //     tooltip : {
    //         trigger: 'axis'
    //     },
    //     legend: {
    //         data:['最高气温','最低气温']
    //     },
    //     toolbox: {
    //         show : true,
    //         feature : {
    //             mark : {show: true},
    //             dataView : {show: true, readOnly: false},
    //             magicType : {show: true, type: ['line', 'bar']},
    //             restore : {show: true},
    //             saveAsImage : {show: true}
    //         }
    //     },
    //     calculable : true,
    //     xAxis : [
    //         {
    //             type : 'category',
    //             boundaryGap : false,
    //             data : ['周一','周二','周三','周四','周五','周六','周日']
    //         }
    //     ],
    //     yAxis : [
    //         {
    //             type : 'value',
    //             axisLabel : {
    //                 formatter: '{value} °C'
    //             }
    //         }
    //     ],
    //     series : [
    //         {
    //             name:'最高气温',
    //             type:'line',
    //             data:[11, 11, 15, 13, 12, 13, 10],
    //             markPoint : {
    //                 data : [
    //                     {type : 'max', name: '最大值'},
    //                     {type : 'min', name: '最小值'}
    //                 ]
    //             },
    //             markLine : {
    //                 data : [
    //                     {type : 'average', name: '平均值'}
    //                 ]
    //             }
    //         },
    //         {
    //             name:'最低气温',
    //             type:'line',
    //             data:[1, -2, 2, 5, 3, 2, 0],
    //             markPoint : {
    //                 data : [
    //                     {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
    //                 ]
    //             },
    //             markLine : {
    //                 data : [
    //                     {type : 'average', name : '平均值'}
    //                 ]
    //             }
    //         }
    //     ]
    // };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}